<template>
	<div>
		<el-container>
			<!-- 头部 -->
			<el-header>
				<div style=" text-align: right; float: right;">
					<el-link :underline="false" type="primary" style="height: 55px; width: 200px; font-size: 20px;">用户名:Header{{id}}}</el-link>
				</div>
			</el-header>

			<!-- 搜索框 -->
			<el-header style="background-color: #E9EEF3;">
				<div style="width: 30%; float: left;">
					<el-input placeholder="请输入搜索内容" v-model="search_value">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</div>
				<div style=" float: left; width: 400px; font-size: 18px;">
					<el-link type="primary" :underline="false" @click="filtrate">刷新</el-link>
					<el-link type="success" :underline="false" @click="filtrate" style="margin-left: 10px;">导出数据</el-link>
					<el-link type="success" :underline="false" @click="resetDateFilter" style="margin-left: 10px;">清除日期过滤器</el-link>
					<el-link type="success" :underline="false" @click="clearFilter" style="margin-left: 10px;">清除所有过滤器</el-link>
				</div>
			</el-header>

			<!-- 数据列表 -->
			<el-main>
				<el-table ref="filterTable" 
				:data="tables" 
				background='true' 
				stripe 
				border
				@selection-change="handleSelectionChange"
				:header-cell-style="{
					'font-weight': '400'}"
				max-height="600"
				style="width: 100%">
					<!-- 多选 -->
					<el-table-column type="selection" width="40">
					</el-table-column>

					<el-table-column label="序号" type="index" width="65">
						<template scope="scope">
							{{scope.$index + addIndex}}
						</template>
					</el-table-column>
					<el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
						:filter-method="filterHandler">
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="address" label="地址" :formatter="formatter">
					</el-table-column>
					<el-table-column prop="tag" label="状态" width="100" :filters="[{ text: '在岗', value: '在岗' }, { text: '离职', value: '离职' }]"
						:filter-method="filterTag" filter-placement="bottom-end">
						<template slot-scope="scope">
							<el-tag :type="scope.row.tag === '离职' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页 -->
				<div v-show="pagi_show" class="block" style="margin-bottom: 30px; margin-top: 20px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
						:page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</el-main>
		</el-container>
	</div>

</template>

<script>
	import text from '../components/text.json'
	// import axios from 'axios'
	export default {
		data() {
			return {
				id: '',
				radio: 3,
				radio_values: ['all', 'on_duty', 'dimission'], // 单选框多值 all,on_duty,dimission
				tableData: [], //存放json数据
				total: 0, //总数目
				pagesize: 20, //每页多少条
				currentPage: 1, //当前页
				search_value: '', //搜索值
				pagi_show: true,
				addIndex: 1, //分页索引
				multipleSelection: [] //多选值存放

			}
		},
		computed: {
			// 模糊搜索
			tables() {
				const search_value = this.search_value
				const currentPage = this.currentPage
				const pagesize = this.pagesize
				if (search_value) {
					// this.pagi_show = false
					return this.tableData.filter(data => {
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(search_value) > -1
						})
					})
				}
				// 衔接分页按钮
				return this.tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize);
			}
		},
		mounted() {
			// 传入本地json 数据
			this.tableData = text
			
			// 传递数据总条数
			let a = text.length
			this.total = a
			
		},
		created() {
			// 路由传参
			this.id = this.$route.query.id;
		},
		methods: {

			// 表格区域
			// 清除日期过滤器
			resetDateFilter() {
				this.$refs.filterTable.clearFilter('date');
			},
			// 清楚所有过滤器
			clearFilter() {
				this.$refs.filterTable.clearFilter();
			},
			// 格式化指定列
			formatter(row) {
				// console.log('column:',column)
				return row.address;
			},
			// 开启列筛选，状态筛选
			filterTag(value, row) {
				return row.tag === value;
			},
			// 时间筛选
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},

			// 分页区域
			// 页面容量改变时运行的函数
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
				//同步数据
				// 重置分页状态，按新的表格容量加载第一页的数据
				this.currentPage = 1;
				// 重置序号
				this.addIndex = 1;
			},
			
			// 当前页改变时运行的函数
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				// 同步数据
				this.currentPage = val;
				// 调用加载数据的方法
				this.addIndex = (this.currentPage - 1) * this.pagesize + 1;
			},
			
			// 多选触发方法
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			filtrate () {
				console.log('刷新')
			}
			// 服务器获取所有数据
			// download() {
			// 	axios({
			// 		method: 'get',
			// 		url:'http://albeibei.cn:8888/select/v1/user/',
			// 		params:''
			// 	})
			// }
				
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}
</style>
